<template>
	<div class="home">
		<router-view></router-view>
		<div class="bottom_div">
			<div class="tab_div" v-for="(item,index) in tabList" @click="change(index)">
				<router-link :to="item.to">
					<img :src="index==selected?item.aurl:item.url">
					<p :class="{color_active:index==selected}">{{item.text}}</p>
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					url: require("../assets/home/tab_home.png"),
					aurl: require("../assets/home/tab_home_active.png"),
					text: "首页",
					to: "/home"
				}, {
					url: require("../assets/home/tab_shopcart.png"),
					aurl: require("../assets/home/tab_shopcart_active.png"),
					text: "购物车",
					to: "/home/shopcart"
				}, {
					url: require("../assets/home/tab_orders.png"),
					aurl: require("../assets/home/tab_orders_active.png"),
					text: "订单",
					to: "/home/orders"
				}, {
					url: require("../assets/home/tab_mine.png"),
					aurl: require("../assets/home/tab_mine_active.png"),
					text: "我的",
					to: "/home/mine"
				}],
				selected: 0
			}
		},
		methods: {
			change: function(index) {
				this.selected = index
			}
		}
	}
</script>

<style lang="less" scoped>
	.home {
		background-color: #ffffff;
		height: 100%;
		position: fixed;
		width: 100%;
	}

	.bottom_div {
		background: #f1f1f1;
		height: 64px;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		align-items: center;
		/* margin-left: -7px; */
	}

	.bottom_div img {
		height: 20px;
		width: 20px;
	}

	.bottom_div p {
		font-size: 10px;
		color: #333333;
	}

	.bottom_div .tab_div {
		text-align: center;
		flex: 1;
	}

	.tab_div .color_active {
		color: #1FA4FC;
	}
</style>
